<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no"/>
	<title>微名片列表</title>
	<link rel="stylesheet" href="css/lt_common.css">
	<link rel="stylesheet" href="css/search_card.css">
	<link rel="stylesheet" href="css/lt_select.css">
</head>
<body>
	<div class="page">
		<div class="input_content"><input id="input_name" class="input_area" type="text" value=""/><i class="search">搜索</i><i class="off"></i><input  class="cancel" type="button" value="取消"></div>
		<div class="select_content">
			<div class="selectbox">
				<div class="down_select">
					<input type="hidden" id="area_hidden" value="">
					<p class="dropBtn area">城市</p>
					<ul id="select_city" class="select_lists">
						<!--
						<li  rel="北京">
							北京
						</li>
						<li  rel="广州">
							广州
						</li>
						-->
					</ul>
				</div>
				<span class="into_down"></span>
			</div>
			<div class="selectbox">
				<div class="down_select">
				<input type="hidden" id="star_hidden" value="">
					<p class="dropBtn">星级</p>
					<ul class="select_lists">
						<li rel="一星">
						<input type="hidden" value = "1">
							<ul class="star_content">
								<li class="stared"></li><li></li><li></li><li></li><li></li>
							</ul>
						</li>
						<li rel="二星">
							<input type="hidden" value = "2">
							<ul class="star_content">
								<li class="stared"></li><li class="stared"></li><li></li><li></li><li></li>
							</ul>
						</li>
						<li rel="三星">
						<input type="hidden" value = "3">
							<ul class="star_content">
								<li class="stared"></li><li class="stared"></li><li class="stared"></li><li></li><li></li>
							</ul>
						</li>
						<li rel="四星">
						<input type="hidden" value = "4">
							<ul class="star_content">
								<li class="stared"></li><li class="stared"></li><li class="stared"></li><li class="stared"></li><li></li>
							</ul>
						</li>
						<li rel="五星">
						<input type="hidden" value = "5">
							<ul class="star_content">
								<li class="stared"></li><li class="stared"></li><li class="stared"></li><li class="stared"></li><li class="stared"></li>
							</ul>
						</li>
					</ul>
				</div>
				<span class="into_down"></span>
			</div>
		</div>
		<div class="list_content clear" id="wrapper">
			<div id="scroller">
				<div id="thelist">
					<!--
					<dl class="items_detial">
						<dd><img src="img/default.png" alt=""></dd>
						<dt>
							<h3 class="name">安又琪<span class="area">北京</span></h3>
							<ul class="star_content">
								<li class="stared"></li><li></li><li></li><li></li><li></li>
							</ul>
							<p>已服务<em>425</em>人</p>
						</dt>
					</dl>
					<dl class="items_detial">
						<dd><img src="img/default.png" alt=""></dd>
						<dt>
							<h3 class="name">安又琪<span class="area">北京</span></h3>
							<ul class="star_content">
								<li class="stared"></li><li></li><li></li><li></li><li></li>
							</ul>
							<p>已服务<em>425</em>人</p>
						</dt>
					</dl>
					<dl class="items_detial">
						<dd><img src="img/default.png" alt=""></dd>
						<dt>
							<h3 class="name">安又琪<span class="area">北京</span></h3>
							<ul class="star_content">
								<li class="stared"></li><li></li><li></li><li></li><li></li>
							</ul>
							<p>已服务<em>425</em>人</p>
						</dt>
					</dl>
					<dl class="items_detial">
						<dd><img src="img/default.png" alt=""></dd>
						<dt>
							<h3 class="name">安又琪<span class="area">北京</span></h3>
							<ul class="star_content">
								<li class="stared"></li><li class="stared"></li><li></li><li></li><li></li>
							</ul>
							<p>已服务<em>425</em>人</p>
						</dt>
					</dl>
					-->
					<div id="pullUp">
						<span class="pullUpIcon"></span><span class="pullUpLabel">加载更多</span>
					</div>
					<div class="foot_logo">
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/common.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/select.jquery.js"></script>
<script src="js/search_card.js"></script>
<script>
	$(function(){
		
		//初始化城市
		initareaAction();
		//初始化列表,城市,星级均不传递
		initAction('','');

		//模拟placeholder及清空输入框
		//当搜索框获取焦点触发事件
		$('.input_area').focus(function() {
			$('.input_area').addClass('cancel_area')
			$('.search').text('');
			$('.search').animate({left: '5%'}, 200);
			$('.off').show();
			$('.cancel').show();
		});
		//当搜索框中的值改变的情况
		$('#input_name').on('input',function() {
			var name = $('#input_name').val();
			searchAction(name);
		});
		//点击搜索框中的叉符号取消事件
		$('.off').on('click',function(){
			$('.input_area').val('');
			$('.input_area').removeClass('cancel_area')
			$('.search').text('搜索');
			$('.search').animate({left: '45%'}, 400);
			$('.off').hide();
			$('.cancel').hide();
			initAction($("#area_hidden").val(),$("#star_hidden").val());
		})
		//搜索框的取消按钮
		$('.cancel').on('click',function(){
			$('.input_area').val('');
			$('.input_area').removeClass('cancel_area')
			$('.search').text('搜索');
			$('.search').animate({left: '45%'}, 400);
			$('.off').hide();
			$('.cancel').hide();
			initAction($("#area_hidden").val(),$("#star_hidden").val());
		})
		//搜索框的鼠标离开事件
		$('.input_area').blur(function() {
			if($('.input_area').val() == ''){
				$('.input_area').removeClass('cancel_area')
				$('.search').text('搜索');
				$('.search').animate({left: '45%'}, 400);
				$('.off').hide();
				$('.cancel').hide();
			}	
		});
		//模拟select
		selectFun();

		//查看详情
		$('.items_detial').on('click',function(){
			//openid为全局变量不可随意赋值取名
			var cur_openid = $(this).find('input').val();
			if(cur_openid != -1 ){
				window.location = "main_card.html?openid="+cur_openid;
			}else{
				alert('该人员暂未绑定微信');
				return;
			}
		})
	})
</script>
<script>
	var myScroll,
	pullUpEl, pullUpOffset;
	
	//当前总页数初始化的时候为-1
	var totalPageCount = -1;
	
	//当前第几页
	var currentPageNo = 1;

//初始化城市
function initareaAction () {

		$.ajax({
			url: API_URL+'city/findcity',
			type: 'GET',
			dataType: "JSON",
			data:'',
			async: false,
			success: function (obj){
				if (obj.status.code == 0) {
					var myData = obj.data;
					var Str = '';
					for(var i=0; i < myData.length; i++){
						var cityItem = myData[i];
						Str += '<li class="area"  rel=\"'+cityItem.name+'\">'+cityItem.name+'</li>';
					}
					$('#select_city').html(Str);
				
				}
			},
			error: function (data){
				console.log("服务器异常!");
			}
		});
	
}


//搜索
function searchAction(name) {
	
	$.ajax({
		url: API_URL+'agentcard/likeagentlist?name='+encodeURI(encodeURI(name)),
		type: 'GET',
		dataType: "JSON",
		data:'',
		async: false,
		success: function (obj){
			if (obj.status.code == 0) {
				currentPageNo = obj.basedata.currentPageNo;
				totalPageCount = obj.basedata.totalPageCount;
				var myData = obj.basedata.data;
				var Str = '';
				$('#thelist dl').remove();
				for(var i=0; i < myData.length; i++){
					var agentItem = myData[i];
					if(agentItem.icon == null || agentItem.icon == ''){
						agentItem.icon ='img/default.png';
					}
					str = '<dl class="items_detial">'+
							'<dd><img src=\"'+agentItem.icon+'\" alt=""></dd>'+
								'<dt>'+
									'<h3 class="name">'+agentItem.name+'<span class="area">'+agentItem.area+'</span></h3>'+
									'<ul class="star_content">';
										for(var j = 1 ; j <= 5 ; j ++){
											if(agentItem.star >= j){
												str += '<li class="stared"></li>';
											}else{
												str += '<li ></li>';
											}
										}
									str += '</ul>'+
									'<p>已服务<em>'+agentItem.agent_service_count+'</em>人</p>'+
								'</dt>'+
						  '</dl>';
					$('#thelist').prepend(str);
				}
			}
		},
		error: function (data){
			console.log("服务器异常!");
		}
	});

}


//初始化列表
//城市,星级
function initAction (city,star) {
	
	$.ajax({
		url: API_URL+'agentcard/findagentlist?area='+encodeURI(encodeURI(city))+'&star='+star,
		type: 'GET',
		dataType: "JSON",
		data:'',
		async: false,
		success: function (obj){
			if (obj.status.code == 0) {
				currentPageNo = obj.basedata.currentPageNo;
				totalPageCount = obj.basedata.totalPageCount;
				var myData = obj.basedata.data;
				var Str = '';
				$('#thelist dl').remove();
				for(var i=0; i < myData.length; i++){
					var agentItem = myData[i];
					if(agentItem.icon == null || agentItem.icon == ''){
						agentItem.icon ='img/default.png';
					}
					if(agentItem.openid == null || agentItem.openid == ''){
						agentItem.openid = '-1';
					}
					str = '<dl class="items_detial"><input type="hidden" value=\"'+agentItem.openid+'\" >'+
							'<dd><img src=\"'+agentItem.icon+'\" alt=""></dd>'+
								'<dt>'+
									'<h3 class="name">'+agentItem.name+'<span class="area">'+agentItem.area+'</span></h3>'+
									'<ul class="star_content">';
										for(var j = 1 ; j <= 5 ; j ++){
											if(agentItem.star >= j){
												str += '<li class="stared"></li>';
											}else{
												str += '<li ></li>';
											}
										}
									str += '</ul>'+
									'<p>已服务<em>'+agentItem.agent_service_count+'</em>人</p>'+
								'</dt>'+
						  '</dl>';
					$('#thelist').prepend(str);
				}
			}
		},
		error: function (data){
			console.log("服务器异常!");
		}
	});

}

//IScroll 插件JS定义方法
//翻页的方法 
function pullUpAction () {
		
		var city = '';
		var star = '';
		var name = '';

		if($("#star_hidden").val() !="" && $("#area_hidden").val() != "" ){
			city = $("#area_hidden").val();
			star = $("#star_hidden").val();
		}else if($("#star_hidden").val() != ""){
			star = $("#star_hidden").val();
		}else if($("#area_hidden").val() != ""){
			city = $("#area_hidden").val();
		}
		
		if($("#input_name").val() != ""){
			name = $("#input_name").val();
		}

		$.ajax({
			url: API_URL+'agentcard/findagentlist?currentPageNo='+(currentPageNo+1)+'&area='+encodeURI(encodeURI(city))+'&star='+star+'&name='+encodeURI(encodeURI(name))
,
			type: 'GET',
			dataType: "JSON",
			data:'',
			async: false,
			success: function (obj){
				if (obj.status.code == 0) {
					currentPageNo = currentPageNo+1;
					totalPageCount = obj.basedata.totalPageCount;
					var myData = obj.basedata.data;
					var Str = '';
					for(var i=0; i < myData.length; i++){
						var agentItem = myData[i];
						if(agentItem.icon == null || agentItem.icon == ''){
							agentItem.icon ='img/default.png';
						}
						str = '<dl class="items_detial">'+
								'<dd><img src=\"'+agentItem.icon+'\" alt=""></dd>'+
									'<dt>'+
										'<h3 class="name">'+agentItem.name+'<span class="area">'+agentItem.area+'</span></h3>'+
										'<ul class="star_content">';
											for(var j = 1 ; j <= 5 ; j ++){
												if(agentItem.star >= j){
													str += '<li class="stared"></li>';
												}else{
													str += '<li ></li>';
												}
											}
										str += '</ul>'+
										'<p>已服务<em>'+agentItem.agent_service_count+'</em>人</p>'+
									'</dt>'+
							  '</dl>';
						$('#pullUp').before(str);
					}
					myScroll.refresh();
				}
			},
			error: function (data){
				console.log("服务器异常!");
			}
		});

}




function loaded() {
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		onRefresh: function () {
			if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载更多';
			}
		},
		onScrollMove: function () {
			if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载更多';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullUpEl.className.match('flip')) {
				if (currentPageNo >= totalPageCount) {
					pullUpEl.className = 'pullUpIcon';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '暂无更多数据';
				}else{
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
					pullUpAction();	// Execute custom function (ajax call?)
				}
				
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 0); }, false);
</script>